<template>
  <section class="m-artistic">
    <dl 
      :style="navStyle"
    >
      <dt class="nav-item">{{ navInfo.title }}</dt>
      <dd
        v-for="item of navInfo.items"
        :key="item.kind"
        :kind="item.kind"
        :keyword="item.keyword"
        :class="['nav-item', {active: currentKind === item.kind}]"
        @mouseover="mouseoverHandler"
      >{{ item.text }}</dd>
    </dl>

    <div class="content clearfix">
      <slot />
    </div>
  </section>
</template>

<script>
export default {
  props: {
    navStyle: {
      type: String,
      default: 'background-color: rgb(190, 164, 116); background-image: linear-gradient(to right, rgb(194, 176, 142) 3%, rgb(190, 164, 116) 100%)'
    },
    navInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      currentKind: this.navInfo.items[0].kind,
      currentKeyword: this.navInfo.items[0].keyword
    }
  },
  mounted() {
    if(this.currentKeyword && this.currentKind) {
      this.$emit('hoverHandler', [this.currentKeyword, this.currentKind])
    }
  },
  methods: {
    mouseoverHandler(e) {
      this.currentKind = e.target.getAttribute('kind')
      this.currentKeyword = e.target.getAttribute('keyword')

      this.$emit('hoverHandler', [this.currentKeyword, this.currentKind])
    }
  }
}
</script>

<style lang="stylus" scoped>
  .m-artistic
    width 1190px
    margin 40px auto 0
    dl
      width 100%
      height 44px
      line-height 44px
      border-top-right-radius 5px
      border-top-left-radius 5px
      box-sizing border-box
      font-size 14px
      color #fff
      &::after
        content ''
        display block
        height 0
        visibility hidden
        clear both
      .nav-item
        position relative
        float left 
        padding 0 5px
        text-transform uppercase
        cursor pointer
      dd.active
        &::after
          content ''
          position absolute 
          bottom 0
          left 50%
          height 0
          border-width 5px
          border-style solid 
          border-color transparent
          border-bottom-color #fff
          transform translateX(-50%)
      dt
        font-size 18px
        margin-left 13px
        margin-right 10px
    .content
      width 100%
      padding 11px 10px 10px
      background-color #fff
      border-bottom-left-radius 4px
      border-bottom-right-radius 4px
      box-sizing border-box
      border 1px solid #e5e5e5
      border-top none 
  @media screen and (max-width 1200px)
    .m-artistic
      width 950px
</style>
